import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
import BallBase from '../components/BallBase.vue';
import BallBounced from '../components/BallBounced.vue';
import BallComplex from '../components/BallComplex.vue';
import TransformBase from '../components/TransformBase.vue';
import VModelDemo from '../components/V-Model-Demo.vue';
import SlotPage from '../components/SlotPage.vue';
import CoolLoading from '../components/CoolLoading.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/ball-base',
    name: 'Ball Base',
    component: BallBase
  },
  {
    path: '/ball-bounce',
    name: 'Ball Bounce',
    component: BallBounced
  },
  {
    path: '/ball-complex',
    name: 'Ball Complex',
    component: BallComplex
  },
  {
    path: '/transform-base',
    name: 'Transform Base',
    component: TransformBase
  },
  {
    path: '/v-model-demo',
    name: 'V-model Demo',
    component: VModelDemo
  },
  {
    path: '/v-slot',
    name: 'v-slot Demo',
    component: SlotPage
  },
  {
    path: '/cool-loading',
    name: 'Coll Loading',
    component: CoolLoading
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;